<template>
  <Slide
    :l="40" :r="6" :w="370" :h="170"
    :imgs="picArray"
    :show="false"
    slider-text="向右滑动完成验证"
    ref="slideverify"
    @success="onSuccess"
  ></Slide>
</template>

<script>
import Slide from './Slide.vue'
export default {
  name: 'SliderVerify',
  props: ['successFun'],
  components:{ Slide },
  data() {
    return {
      //在data中引入`assets`中的图片可以通过`require`的方式来引入
      picArray: [require('@/assets/img/login/big_bg.png')],
    };
  },
  methods: {
    onSuccess() {
      //调用父组件传递过来的验证通过的回调函数
      this.successFun();
    },
    onReset() {
      //重置图片验证组件
      this.$refs.slideverify.reset();
    },
  },
  mounted() {
    // 开启侦听一个刷新组件的方法，让登录页每次调用时都刷新一次
     this.onReset()
  },
};
</script>
